<template>
    <div>
        <el-dialog :title="titleInfo" :visible.sync="showAddTreatInfo" width="35%" :show-close="false"
                   :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="治疗编号" v-if="editButtonShow">
                    <el-input v-model="form.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="治疗信息编号">
                    <el-input v-model="form.treatId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="是否重症" prop="isSerious">
                    <el-select v-model="form.isSerious" style="width: 100%;" clearable placeholder="请选择">
                        <el-option
                            v-for="item in isSevereDicInfo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当天时间">
                    <el-date-picker type="date" placeholder="选择日期" v-model="timeInfo"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    :disabled="true"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="症状" prop="symptoms">
                    <el-input v-model="form.symptoms"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                    <el-input v-model="form.note"></el-input>
                </el-form-item>
                <el-form-item label="抗原自测" prop="ctDetectionInfo">
                    <el-select v-model="form.ctDetectionInfo" style="width: 100%;" clearable placeholder="请选择">
                        <el-option
                            v-for="item in inspectionInfoDicInfo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="核酸检测" prop="detectionInfo">
                    <el-select v-model="form.detectionInfo" style="width: 100%;" clearable placeholder="请选择">
                        <el-option
                            v-for="item in inspectionInfoDicInfo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否可出院" prop="isLeave">
                    <el-select v-model="form.isLeave" style="width: 100%;" clearable placeholder="请选择">
                        <el-option
                            v-for="item in isSevereDicInfo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button v-show="addButtonShow" type="primary" @click="submitForm('form')">立即创建</el-button>
                    <el-button v-show="addButtonShow" @click="resetForm('form')">重置</el-button>
                    <el-button v-show="editButtonShow" type="primary" @click="updateForm('form')">修改</el-button>
                    <el-button @click="closeInfoDialog">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {mapActions} from "vuex";

export default {
    name: "addTreatInfo.vue",
    props: {
        showAddTreatInfo: {type: Boolean, default: false},
        treatIdInfo: {type: String, default: ''},
        timeInfo: {type: String, default: ''},
        id: {type: String, default: ''},
        addButtonShow: {type: Boolean, default: false},
        editButtonShow: {type: Boolean, default: false},
        titleInfo: {type: String, default: '新增患者治疗信息'},
    },
    watch: {
        showAddTreatInfo: {
            immediate: true,
            handler(newValue, oldValue) {
                if (this.treatIdInfo !== null && this.treatIdInfo !== '') {
                    this.form.treatId = this.treatIdInfo
                }
                if (newValue === true && this.id !== null && this.id !== '' && this.id !== undefined) {
                    this.detailInfo(this.id)
                }
            }
        }
    },
    mounted() {
        this.init()
    },
    data() {
        return {
            form: {
                id: '',
                treatId: '',
                isSerious: '',
                time: '',
                symptoms: '',
                note: '',
                ctDetectionInfo: '',
                detectionInfo: '',
                isLeave: ''
            },
            rules: {
                isSerious: [
                    {required: true, message: '请选择患者情况', trigger: 'change'},
                ],
                symptoms: [
                    {required: true, message: '请填写患者症状', trigger: 'change'},
                ],
                note: [
                    {required: true, message: '请填写备注信息', trigger: 'blur'},
                ],
                detectionInfo: [
                    {required: true, message: '请选择核酸检测信息', trigger: 'change'}
                ],
                isLeave: [
                    {required: true, message: '请填写活动形式', trigger: 'blur'},
                ]
            },
            isSevereDicInfo: '',
            inspectionInfoDicInfo: '',
        };
    },
    methods: {
        ...mapActions("treatmentInfo", ["addTreatmentInfo","updateTreatmentInfo","treatmentInfoDetail"]),
        ...mapActions("dict", ["optionListCode"]),
        async init() {
            let dicInfo = ['isSevere', 'inspectionInfo']
            let res = await this.optionListCode(dicInfo)
            this.isSevereDicInfo = res.isSevere
            this.inspectionInfoDicInfo = res.inspectionInfo
        },
        // 详情查询
        async detailInfo(id) {
            let res = await this.treatmentInfoDetail(id)
            this.form = res.data
        },
        // 修改
        updateForm(formInfo) {
            this.$refs[formInfo].validate(async valid => {
                if (valid) {
                    const res = await this.updateTreatmentInfo(this.form)
                    if (res.data === true) {
                        this.$message({
                            message: '患者治疗信息修改成功',
                            type: 'success'
                        });
                        this.closeAddForm();
                    }
                } else {
                    return false;
                }
            });
        },
        submitForm(formInfo) {
            this.form.time = this.timeInfo
            this.$refs[formInfo].validate(async valid => {
                if (valid) {
                    const res = await this.addTreatmentInfo(this.form)
                    if (res.data === true) {
                        this.$message({
                            message: '患者治疗信息添加成功',
                            type: 'success'
                        });
                        this.form = {
                            treatId: this.treatIdInfo,
                        };
                        await this.closeAddForm();
                    }
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            if (this.$refs[formName] !== undefined) {
                this.$refs[formName].resetFields();
            }
        },
        // 隐藏新增框
        closeAddForm() {
            this.$emit('showTableInfo')
            this.closeDetailDialog()
        },
        closeInfoDialog() {
            this.closeDetailDialog()
        },
        // 关闭dialog所做的操作
        closeDetailDialog() {
            this.$emit('update:showAddTreatInfo', false)
            this.$emit('update:addButtonShow', false)
            this.$emit('update:editButtonShow', false)
            this.resetForm('form')
            this.$emit('update:id', null)
            this.$emit('update:titleInfo', '新增患者治疗信息')
        }
    }
}
</script>

<style scoped>

</style>
